<template>
  <uni-nav-bar :fixed="true" status-bar :border="false" :title="props.options.title" @clickLeft="getMessage" :backgroundColor="props.options.backgroundColor">
    <template v-slot:left>
      <uni-badge :text="messgaeNum" absolute="rightTop" size="small" :offset="[-0, 4]">
        <!-- <view class="u-center">
          <image src="https://img.qumoyugo.com/webimgbg/picopino_icon_news-ld.png" style="width:60rpx;height:60rpx;margin-left: 16rpx"></image>
        </view> -->
      </uni-badge>
    </template>
    <slot>
      <view class="u-center" style="font-size: 36rpx;font-weight: bold;text-align: center;flex:1">{{ props.options.title }}</view>
    </slot>
  </uni-nav-bar>
</template>

<script setup>
import { computed, getCurrentInstance } from 'vue'
import { useStore } from '@/store/index'
const { $subscribeMessage } = getCurrentInstance().appContext.config.globalProperties
const store = useStore()
const props = defineProps({
  options: {
    type: Object,
    default: () => {}
  },
  type: {
    type: String,
    default: ''
  }
})
const messgaeNum = computed(() => {
  const messageNum = store.state?.messageNum
  let num = 0
  for (const key in messageNum) {
    num += messageNum[key]
  }
  return num
})
const getMessage = () => {
  const tmplIds = ['rqNnVdo9PJ2KNrpb3GybGUFQXGWOyPN9mPfZqSye-fE']
  $subscribeMessage(tmplIds, (res) => {
    console.log(res)
  })
  uni.navigateTo({
    url: '/msg/message'
  })
}
</script>

<style scoped lang="scss">

</style>
